<template>
    <el-card shadow="never">
        <div class="title_box">
            <div>裂变活动获客情况</div>
            <div>
                <el-button @click="goLookActor">查看参与者</el-button>
                <el-button :disabled="!chart.num.length" @click="onExport">导出</el-button>
            </div>
        </div>
        <el-divider />
        <el-radio-group v-model="pageType" size="large" @change="onBtnChange">
            <el-radio-button v-for="item in filterGenraal" :key="item.id" :label="item.id">{{
                item.label
            }}</el-radio-button>
        </el-radio-group>
        <div v-if="chart.num.length" id="echarts" ref="myChartLineRef"></div>
        <el-empty v-else>
            <template #image>
                <img class="empty_img" src="@/assets/noData.png" alt="" />
            </template>
        </el-empty>
    </el-card>
</template>

<script setup lang="ts">
import { ref, inject, nextTick, watch, withDefaults, defineProps, defineEmits, reactive, computed } from 'vue';
import { export2Img } from '@/utils/utils';
import { useRoute } from 'vue-router';
import router from '@/router';
interface Props {
    chart: any;
    type: any;
}
const route = useRoute();
const props = withDefaults(defineProps<Props>(), {
    chart: () => {
        return {
            num: [],
            time: []
        };
    },
    type: null
});
const emit = defineEmits(['submit', 'export']);
const general = reactive([
    { id: 1, label: '参与人数' },
    { id: 4, label: '分享人数' },
    { id: 2, label: '完成客户数' },
    { id: 5, label: '领奖人数' },
    { id: 6, label: '助力人数' },
    { id: 7, label: '获客数量' },
    { id: 8, label: '流失客户数' },
    { id: 9, label: '关注粉丝数' },
    { id: 10, label: '取关粉丝数' }
]);
const filterGenraal = computed(() => {
    let data: any = [];
    if (props.type == 1) {
        data = general.filter((item: any) => ![9, 10].includes(item.id));
    } else {
        data = general.filter((item: any) => ![].includes(item.id));
    }
    return data;
});
const pageType = ref(1);
const echarts: any = inject('ec');
const myChartLineRef = ref(null);
const onExport = () => {
    // export2Img(myChartLineRef.value, findLabel(pageType.value)?.label)
    emit('export');
};
const onBtnChange = (v: any) => {
    pageType.value = v;
    emit('submit', v);
};
const findLabel = (id: any) => {
    return general.find((item: any) => item.id == id);
};

const getEchartsLine = () => {
    const myChartLine = echarts?.init(myChartLineRef.value);
    const option = {
        color: ['#fa6c00'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#FF6B00'
                }
            }
        },
        grid: {
            top: 50,
            bottom: 20,
            left: 32,
            right: 40,
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: props.chart.time,
            boundaryGap: false,
            // axisTick: {
            //   show: false,
            //   alignWithLabel: true
            // },
            offset: 3
        },
        yAxis: {
            type: 'value',
            name: '人',
            nameGap: 10, // y轴name与横纵坐标轴线的间距
            nameTextStyle: {
                padding: [0, 35, 10, 0] // 加上padding可以调整其位置
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#969696'
            },
            splitLine: {
                lineStyle: {
                    type: 'line',
                    color: '#e8e8e8' // 分割线颜色
                }
            }
        },
        series: [
            {
                name: findLabel(pageType.value)?.label,
                type: 'line',
                data: props.chart.num,
                smooth: true,
                symbol: 'circle',
                symbolSize: 0,
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: 'rgba(247, 222, 211)' },
                            { offset: 0.5, color: 'rgba(251, 230, 223)' },
                            { offset: 1, color: 'rgba(255, 255, 255)' }
                        ])
                    }
                },
                itemStyle: {
                    normal: {
                        borderWidth: 2,
                        color: '#FF9D23'
                    }
                },
                emphasis: {
                    // 鼠标 hover 时的样式
                    itemStyle: {
                        color: '#FF9D23', // hover 圆点颜色
                        borderColor: '#FF9D23', // hover 圆点边框颜色
                        borderWidth: 8
                    }
                }
            }
        ]
    };
    myChartLine.setOption(option);
    window.onresize = function () {
        myChartLine.resize();
    };
};
const goLookActor = () => {
    router.push(`/smartMarketing/fission/fissionDrainage/participant?id=${route.query.id}`);
};
watch(
    () => props.chart,
    v => {
        nextTick(() => {
            getEchartsLine();
        });
    },
    { deep: true }
);
</script>

<style lang="scss" scoped>
.title_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.el-divider {
    margin-top: 8px;
    margin-bottom: 16px;
}

#echarts {
    display: flex;
    justify-content: center;
    height: 320px;
}

.empty_img {
    transform: translateX(13%);
}
</style>
